<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>张伟峰-3D图片旋转环</title>
	<link rel="stylesheet" type="text/css" href="../css/base.css" >
	<style>
		body{
			background:rgba(2,2,2,1);overflow:hidden;
		}
		#div2 {
			position:absolute; left:50%; top:50%; width:1200px; height:1200px; 
			
			background:-webkit-radial-gradient(center center, 600px 600px ,rgba(50,50,50,1), rgba(0,0,0,0));
			background:-moz-radial-gradient(center center, 600px 600px ,rgba(50,50,50,1), rgba(0,0,0,0));
			background:-ms-radial-gradient(center center, 600px 600px ,rgba(50,50,50,1), rgba(0,0,0,0));
			background:-o-radial-gradient(center center, 600px 600px ,rgba(50,50,50,1), rgba(0,0,0,0));
			background:radial-gradient(center center, 600px 600px ,rgba(50,50,50,1), rgba(0,0,0,0));
			
			margin-left:-600px; margin-top:-600px;
			-webkit-transform:translateY(200px) rotateX(90deg);
			-moz-transform:translateY(200px) rotateX(90deg);
			-ms-transform:translateY(200px) rotateX(90deg);
			-o-transform:translateY(200px) rotateX(90deg);
			transform:translateY(200px) rotateX(90deg);
		}
		#div1 {width:200px; height:200px; position:relative; margin:150px auto;
			background:null;
			
			-webkit-transform:perspective(1000px) rotateX(-10deg) rotateY(0deg);
			-moz-transform:perspective(1000px) rotateX(-10deg) rotateY(0deg);
			-ms-transform:perspective(1000px) rotateX(-10deg) rotateY(0deg);
			-o-transform:perspective(1000px) rotateX(-10deg) rotateY(0deg);
			transform:perspective(1000px) rotateX(-10deg) rotateY(0deg);
			
			-webkit-transform-style:preserve-3d;
			-moz-transform-style:preserve-3d;
			-ms-transform-style:preserve-3d;
			-o-transform-style:preserve-3d;
			transform-style:preserve-3d;
		}
		#div1 div.hid {position:absolute; left:50%; margin-left:-67px; margin-top:-90px; top:50%; background-size:100% 100%; font-size:50px;
			-webkit-transition:1s all ease;
			-moz-transition:1s all ease;
			-ms-transition:1s all ease;
			-o-transition:1s all ease;
			transition:1s all ease;

			overflow:hidden; width:153px; height:400px;
			
			-webkit-transform:rotateY(0deg) translateZ(0px);
			-moz-transform:rotateY(0deg) translateZ(0px);
			-ms-transform:rotateY(0deg) translateZ(0px);
			-o-transform:rotateY(0deg) translateZ(0px);
			transform:rotateY(0deg) translateZ(0px);
		}
		#div1 div.img {top:10px; left:10px; margin:0; box-shadow:0 0 10px white; width:133px; height:200px; position:absolute; border-radius:2px;}

		#div1 div.img .shadow { position:absolute; left:0; top:-102px; width:133px; height:200px;
			background-size:100% 100%;
			opacity:0.2;
		}
		#div1 div .over {position:absolute; left:0; top:214px; width:133px; height:100px; overflow:-hidden;
			-webkit-transform:scale(1,-1);
			-moz-transform:scale(1,-1);
			-ms-transform:scale(1,-1);
			-o-transform:scale(1,-1);
			transform:scale(1,-1);
		}
	</style>
</head>
<script>
window.onload=function (){
	var M=11;
	var oDiv=document.getElementById('div1');
	var aDiv=oDiv.getElementsByClassName('hid');
	var x=-10;
	var y=0;
	
	var speedX=0;
	var speedY=0;
	
	for(var i=1;i<=M;i++)
	{
		var oNewDiv=document.createElement('div');
		
		oNewDiv.className='hid';
		
		(function (oNewDiv,i){
			setTimeout(function (){
				oNewDiv.style.WebkitTransform='rotateY('+(360*(i-1)/M)+'deg) translateZ(400px)';
				oNewDiv.style.MozTransform='rotateY('+(360*(i-1)/M)+'deg) translateZ(400px)';
				oNewDiv.style.msTransform='rotateY('+(360*(i-1)/M)+'deg) translateZ(400px)';
				oNewDiv.style.OTransform='rotateY('+(360*(i-1)/M)+'deg) translateZ(400px)';
				oNewDiv.style.transform='rotateY('+(360*(i-1)/M)+'deg) translateZ(400px)';
		
				setTimeout(function (){
					if(i==M)fixAll();
					
					setTimeout(function (){
						
						oNewDiv.style.WebkitTransition='none';
						oNewDiv.style.MozTransition='none';
						oNewDiv.style.msTransition='none';
						oNewDiv.style.OTransition='none';
						oNewDiv.style.transition='none';
						
					},1000);
				}, 3000);
			}, (M+3-i)*200);
		})(oNewDiv,i);
		
		oNewDiv.degY=360*(i-1)/M;
		
		oNewDiv.innerHTML='<div class="img"><span class="over"><span class="shadow"></span></span></div>';
		oNewDiv=oNewDiv.getElementsByClassName('img')[0];
		
		oNewDiv.style.background='url(img2/'+i+'.jpg)';
		
		oNewDiv.getElementsByClassName('shadow')[0].style.background='-webkit-linear-gradient(rgba(0,0,0,1) 40%, rgba(255,255,255,0)), url(img2/'+i+'.jpg)';
		oNewDiv.getElementsByClassName('shadow')[0].style.background='-moz-linear-gradient(rgba(0,0,0,1) 40%, rgba(255,255,255,0)), url(img2/'+i+'.jpg)';
		oNewDiv.getElementsByClassName('shadow')[0].style.background='-ms-linear-gradient(rgba(0,0,0,1) 40%, rgba(255,255,255,0)), url(img2/'+i+'.jpg)';
		oNewDiv.getElementsByClassName('shadow')[0].style.background='-o-linear-gradient(rgba(0,0,0,1) 40%, rgba(255,255,255,0)), url(img2/'+i+'.jpg)';
		oNewDiv.getElementsByClassName('shadow')[0].style.backgroundSize='100% 100%';
		oNewDiv.style.backgroundSize='100% 100%';
		
		oDiv.appendChild(oNewDiv.parentNode);
	}
	
	document.onmousedown=function (ev)
	{
		var oEvent=ev||event;
		var mouseStartX=oEvent.clientX;
		var mouseStartY=oEvent.clientY;
		
		var startX=x;
		var startY=y;
		
		var lastX=mouseStartX;
		var lastY=mouseStartY;
		
		speedX=speedY=0;
		
		document.onmousemove=function(ev)
		{
			var oEvent=ev||event;
			
			y=startY+(oEvent.clientX-mouseStartX)/10;
			x=startX-(oEvent.clientY-mouseStartY)/10;
			
			speedX=(oEvent.clientX-lastX)/5;
			speedY=(oEvent.clientY-lastY)/5;
			
			fixAll();
			
			lastX=oEvent.clientX;
			lastY=oEvent.clientY;
		};
		
		document.onmouseup=function ()
		{
			document.onmousemove=null;
			document.onmouseup=null;
			
			startMove();
		};
		
		stopMove();
		
		return false;
	};
	
	var timer=null;
	function startMove()
	{
		clearInterval(timer);
		timer=setInterval(function (){
			x-=speedY;
			y+=speedX;
			
			speedY*=0.93;
			speedX*=0.93;
			
			if(Math.abs(speedX)<0.1 && Math.abs(speedY)<0.1)
				stopMove();
			
			fixAll();
		}, 30);
	}
	
	function stopMove()
	{
		clearInterval(timer);
	}
	
	function fixAll()
	{
		oDiv.style.WebkitTransform='perspective(1000px) rotateX('+x+'deg) rotateY('+y+'deg)';
		oDiv.style.MozTransform='perspective(1000px) rotateX('+x+'deg) rotateY('+y+'deg)';
		oDiv.style.msTransform='perspective(1000px) rotateX('+x+'deg) rotateY('+y+'deg)';
		oDiv.style.OTransform='perspective(1000px) rotateX('+x+'deg) rotateY('+y+'deg)';
		oDiv.style.transform='perspective(1000px) rotateX('+x+'deg) rotateY('+y+'deg)';
		
		for(var i=0;i<aDiv.length;i++)
		{
			var deg=aDiv[i].degY+y;
			var a=(deg%360+360)%360;
			
			a=Math.abs(180-a);
			
			var d=0.1+(a/180)*0.9;
			
			if(d<0.2)d=0.2;
			
			aDiv[i].style.opacity=d;
			
		}
	}
};
</script>
<body>
	<div id="div1">
		<strong id="div2"></strong>
	</div>
</body>
</html>